<template>
  <div class="mx-2 p-4 shadow-lg rounded-lg overflow-hidden">
    <div class="flex items-center my-4">
      <svg
        class="w-10 h-10 text-emerald-500"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
      <h3 class="text-3xl px-4">待办信息</h3>
    </div>
    <ZForm class="flex flex-col justify-center my-4 lg:(flex-row space-x-4)">
      <QuerySelect
        title="日期范围"
        v-model="todosStore.query.days"
        :options="conditions.days"
      />
      <QuerySelect
        title="优先级"
        v-model="todosStore.query.priority"
        :options="conditions.priority"
      />
      <QuerySelect
        title="完成情况"
        v-model="todosStore.query.finished"
        :options="conditions.finished"
      />
    </ZForm>

    <ZTimeline
      :items="todosStore.todos"
      title-prop="title"
      time-prop="createdAt"
      :color="todoColor"
    >
      <template #time="{ item }">
        <div class="flex items-center text-accent">
          {{ dateFmt(item.createdAt, "YYYY-MM-DD HH:mm:ss") }}
        </div>
      </template>
      <template #default="{ item }">
        <div class="text-neutral whitespace-pre-line">{{ item.sketch }}</div>
        <div class="flex justify-between items-center my-2">
          <div class="flex items-center">
            <svg
              class="w-6 h-6"
              :class="{ 'text-emerald-500': item.finishedAt }"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
              ></path>
            </svg>
            <span v-if="item.finishedAt" class="ml-1 truncate text-orange-500">
              {{ dateFmt(item.finishedAt, "YYYY-MM-DD HH:mm:ss") }}
            </span>
          </div>
        </div>
        <hr class="my-4" />
        <div class="space-x-1">
          <ZPopConfirm
            title="确认完成该待办吗？"
            cancel-button
            @ok="(todosStore.selected = item), todosStore.finishTodo()"
          >
            <ZButton size="small" :disabled="item.finishedAt != undefined">
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                ></path>
              </svg>
              完成
            </ZButton>
          </ZPopConfirm>
          <ZButton
            background="var(--accent)"
            size="small"
            :disabled="item.finishedAt != undefined"
            @click="
              (todosStore.selected = item), router.push({ name: 'todos.edit' })
            "
          >
            <svg
              class="w-6 h-6 mr-1"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
              ></path>
            </svg>
            修改
          </ZButton>
          <ZPopConfirm
            title="真的要删除该待办吗？"
            cancel-button
            @ok="(todosStore.selected = item), todosStore.removeTodo()"
          >
            <ZButton background="var(--error)" size="small">
              <svg
                class="w-6 h-6 mr-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                ></path>
              </svg>
              删除
            </ZButton>
          </ZPopConfirm>
        </div>
      </template>
    </ZTimeline>
    <ZDivider
      v-show="todosStore.ending"
      title="我是有底线滴"
      color="#a7f3d0"
      dashed
      placement="center"
    />
  </div>
</template>
<script lang="ts" setup>
import dayjs from "dayjs";
import { useUserStore } from "@/stores/user";
import { useTodosStore } from "@/stores/todos";
import { Todo } from "@/components/types";
import { conditions, newTodo } from "@/components/constants";
import { useRouter } from "vue-router";

const router = useRouter(),
  todosStore = useTodosStore(),
  dateFmt = (date: string, fmt = "YYYY-MM-DD") => dayjs(date).format(fmt);
const todoColor = (todo: Todo) =>
  todo.priority == "Normal"
    ? "text-emerald-500"
    : todo.priority == "Important"
    ? "text-orange-500"
    : "text-red-500";
</script>
